<template>
  <div class="m-b-15" style="padding-bottom:15px">
    <div style="width:80%;margin:0 auto" class="printSet">
      <el-collapse v-model="activeNames" @change="handleChange" accordion>
        <!--销售出库单 S **********************************************************************-->
        <el-collapse-item
          :title="item.text + '- 打印设置'"
          :name="item.key"
          v-for="(item,index) in printList"
          :key="index"
        >
          <!--销售出库单[打印设置]-->
          <el-form ref="form" :model="sellingOutForm" label-width="80px">
            <el-form-item label="单据标题">
              <el-input v-model="sellingOutForm.detailtitle"></el-input>
            </el-form-item>
            <el-form-item label="单据头显示" class="set">
              <el-checkbox-group v-model="sellingOutForm.check">
                <el-checkbox
                  :label="i"
                  :name="i.code"
                  v-for="(i,index) in sellingOutForm.dataSet"
                  :checked="i.isPrint"
                  :key="index"
                >{{i.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!--<el-form-item label="其它设置" class="set" >-->
            <!--<el-checkbox-group v-model="sellingOutForm.type">-->
            <!--<el-checkbox label="显示商品单价" name="type"></el-checkbox>-->
            <!--</el-checkbox-group>-->
            <!--</el-form-item>-->
            <el-form-item label="权益说明">
              <el-input
                type="textarea"
                v-model="sellingOutForm.detailorderExplain"
                :rows="8"
                style="resize: none;"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSellingOutPrintSet">
                <i class="icon f-14 icon-baocun1"></i> 保存打印设置
              </el-button>
            </el-form-item>
          </el-form>

          <!--销售出库单[预览效果]-->
          <div class="view">效果预览</div>
          <div class="printTable">
            <div class="printTitle">{{sellingOutForm.detailtitle}}</div>
            <div class="weui-grids">
              <div
                class="weui-grid"
                v-for="i in sellingOutForm.check"
                v-if="i.code!='amount'&& i.code!='preferentialAmount' && i.code!='rechargeAmount'  && i.code!='realPayment' "
              >
                <span class="title">{{i.name}}：</span>
                <span v-if="i.code=='no'">XC2018060639812</span>
                <span v-if="i.code=='warehouse'">西北一仓</span>
                <span v-if="i.code=='client'">星火路大商104便利店</span>
                <span v-if="i.code=='salesman'">任涛</span>
                <span v-if="i.code=='carDistributor'">郝亮</span>
                <span v-if="i.code=='remark'">打印单据</span>
              </div>
            </div>
            <!--表格-->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="no" label="条码"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="specification" label="规格"></el-table-column>
              <el-table-column prop="price" label="单价（大单位/元）"></el-table-column>
              <el-table-column prop="num" label="销售数量"></el-table-column>
              <el-table-column prop="amount" label="金额（元）"></el-table-column>
            </el-table>
            <div class="weui-grids">
              <div
                class="weui-grid"
                v-for="i in sellingOutForm.check"
                v-if="i.code=='amount' || i.code=='preferentialAmount' || i.code=='rechargeAmount'  || i.code=='realPayment' "
              >
                <span class="title">{{i.name}}：</span>
                <span v-if="i.code=='amount'">183.00元</span>
                <span v-if="i.code=='preferentialAmount'">33.00元</span>
                <span v-if="i.code=='rechargeAmount'">500.00</span>
                <span v-if="i.code=='realPayment'">150.00元</span>
              </div>
            </div>
            <div class="remark" v-html="sellingOutForm.detailorderExplainPreview"></div>
          </div>
        </el-collapse-item>
        <!--销售出库单 E **********************************************************************-->
      </el-collapse>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      printList: [],
      activeNames: "1",
      headList: [],
      /* 销售出库单 - 打印设置 */
      sellingOutForm: {
        name: "销售出库单",
        dataSet: "",
        check: [],
        desc: "活动优惠赠送地推产品2箱"
      },
      /* 销售退货单 - 打印设置 */
      sellingReturnForm: {
        name: "销售出库单",
        dataSet: "",
        check: [],
        desc: "其中部分货品包装完全损坏，扣除一定费用"
      },
      /* 采购入库单 - 打印设置 */
      purchaseInForm: {
        name: "采购入库单",
        dataSet: "",
        check: [],
        desc: "其中部分货品包装完全损坏，扣除一定费用"
      },
      /* 采购退货单 - 打印设置 */
      purchaseReturnForm: {
        name: "采购退货单",
        dataSet: "",
        check: [],
        desc: "其中部分货品包装完全损坏，扣除一定费用"
      },
      /* 打印预览 - 单据体模拟效果数据 */
      tableData: [
        {
          no: "4896099118063",
          name: "康师傅冰红茶",
          specification: "500ml/瓶",
          num: "2箱 10瓶",
          price: 2.5,
          amount: 10
        },
        {
          no: "4896099118072",
          name: "统一绿茶",
          specification: "500ml/瓶",
          num: "1箱 3件",
          price: 3,
          amount: 30
        },
        {
          no: "4896099118095",
          name: "娃哈哈矿泉水",
          specification: "500ml/瓶",
          num: "1箱  6瓶",
          price: 2,
          amount: 18
        },
        {
          no: "4896099118033",
          name: "蜂蜜柚子茶",
          specification: "500ml/瓶",
          num: "20瓶",
          price: 5,
          amount: 35
        },
        {
          no: "4896099118029",
          name: "脉动",
          specification: "500ml/瓶",
          num: "3件 20瓶",
          price: 6,
          amount: 90
        }
      ],
      returnList: []
    };
  },
  created() {
    window.this = this;
    var that = this;
    this.$axios.get("organization/printSettingOrders/create").then(
      res => {
        if (res.success) {
          that.printList = res.content.printSettingOrderTypes;
        }
      },
      res => {}
    );
  },
  methods: {
    goBack() {
      this.router.go(-1);
    },
    handleChange(val) {
      // console.log(val);
    },
    //销售出库单 - 保存
    saveSellingOutPrintSet() {
      var data = {};
      data.printType = this.sellingOutForm.printType.key;
      data.title = this.sellingOutForm.detailtitle;
      data.orderExplain = this.sellingOutForm.detailorderExplain;
      data.dataSet = [];
      for (var i = 0; i < this.sellingOutForm.check.length; i++) {
        data.dataSet.push(this.sellingOutForm.check[i].code);
      }
      data = JSON.stringify(data);
      this.$http
        .post("printSettingOrders/edit", data, {
          "content-type": "application/json"
        })
        .then(
          res => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
            } else {
              this.$message.error(res.data.message);
            }
          },
          res => {}
        );
    },
    //销售退货单 - 保存
    saveSellingReturnPrintSet() {
      var data = {};
      data.printType = this.sellingReturnForm.printType.key;
      data.title = this.sellingReturnForm.detailtitle;
      data.orderExplain = this.sellingReturnForm.detailorderExplain;
      data.dataSet = [];
      for (var i = 0; i < this.sellingReturnForm.check.length; i++) {
        data.dataSet.push(this.sellingReturnForm.check[i].code);
      }
      data = JSON.stringify(data);
      this.$http
        .post("printSettingOrders/edit", data, {
          "content-type": "application/json"
        })
        .then(
          res => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
            } else {
              this.$message.error(res.data.message);
            }
          },
          res => {}
        );
    },
    //采购入库单 - 保存
    savePurchaseInPrintSet() {
      var data = {};
      data.printType = this.purchaseInForm.printType.key;
      data.title = this.purchaseInForm.detailtitle;
      data.orderExplain = this.purchaseInForm.detailorderExplain;
      data.dataSet = [];
      for (var i = 0; i < this.purchaseInForm.check.length; i++) {
        data.dataSet.push(this.purchaseInForm.check[i].code);
      }
      data = JSON.stringify(data);
      this.$http
        .post("printSettingOrders/edit", data, {
          "content-type": "application/json"
        })
        .then(
          res => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
            } else {
              this.$message.error(res.data.message);
            }
          },
          res => {}
        );
    },
    //采购退货单 - 保存
    savePurchaseReturnPrintSet() {
      var data = {};
      data.printType = this.purchaseReturnForm.printType.key;
      data.title = this.purchaseReturnForm.detailtitle;
      data.orderExplain = this.purchaseReturnForm.detailorderExplain;
      data.dataSet = [];
      for (var i = 0; i < this.purchaseReturnForm.check.length; i++) {
        data.dataSet.push(this.purchaseReturnForm.check[i].code);
      }
      data = JSON.stringify(data);
      this.$http
        .post("printSettingOrders/edit", data, {
          "content-type": "application/json"
        })
        .then(
          res => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
            } else {
              this.$message.error(res.data.message);
            }
          },
          res => {}
        );
    }
  }
};
</script>
<style scoped>
.view {
  padding: 10px;
  padding-bottom: 20px;
  font-size: 16px;
  color: #1c84c6;
  text-align: center;
}
.printTable {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 20px;
}
.printTable .printTitle {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 800;
}
.printTable .el-table {
  background-color: transparent;
}
.weui-grids {
  position: relative;
  overflow: hidden;
}
.weui-grid {
  position: relative;
  float: left;
  padding: 9px 10px;
  width: 33.33333333%;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  text-align: left;
}
.title {
  font-weight: 600;
}
.totalPrice {
  padding: 15px;
  border-bottom: 1px solid #ccc;
}
.remark {
  font-size: 16px;
  font-weight: 500;
  /*border-bottom: 1px solid #ccc;*/
  padding: 15px 10px;
  color: #5a5e66;
}
</style>